<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 不能使用vue的语法 -->
		<div id="app">
			<!-- vue的环境，可以使用vue的语法 -->
			<h1>{{ title }}</h1>
			<input type="text" v-model="title"/>
			<ul>
				<li v-for="data in arr">
					{{data.name}}
					-
					{{data.price}}
					-
					{{data.sales}}<button v-if="data.stock - data.sales > 0" type="button" @click="add(data)">销量+</button>
					-
					{{data.stock - data.sales}}<button type="button" @click="add2(data)">库存+</button>
					<span v-if="data.stock - data.sales <= 0">卖完了</span>
				</li>
			</ul>
			<p>总数量：{{num}}</p>
		</div>
	</body>
	<script src="../vue.js"></script>
	<script type="text/javascript">
		// console.log(Vue);
		
		let vm = new Vue({
			el:"#app",
			data:{
				title:"你好 VUE",
				arr:[{
					name:"手机",
					price:999,
					stock:10,
					sales:4
				},{
					name:"电脑",
					price:888,
					stock:9,
					sales:2
				},{
					name:"音箱",
					price:679,
					stock:6,
					sales:4
				}]
			},
			methods:{
				add(data){
					data.sales ++;
				},
				add2(data){
					data.stock ++;
				}
			},
			computed:{
				num(){
					let s = 0;
					this.arr.forEach(val=>{
						s += val.sales
					})
					return s;
				}
			}
		});
		
	</script>
</html>
